// 通过回调函数来返回最终的值,(basePixelSize:字体基础像素值,baseFontSize:字体放大倍数)
function addTableBox(basePixelSize, baseFontSize, tableData = [['标题1', '标题2'], ['1111111', '222222222']], lineNumShow = true) {
    // 每列需要的像素值
    const cloumnMaxWidthArr = getTableBoxCloumnMaxWithArr(basePixelSize, baseFontSize, tableData);
    //创建
    return createTableBox(basePixelSize, baseFontSize, cloumnMaxWidthArr, tableData, lineNumShow);
}

function getTableBoxCloumnMaxWithArr(basePixelSize, baseFontSize, tableData) {
    // 添加一些多余的宽度，更好看
    let initValue = 20;
    let cloumnMaxWidthArr = [];
    for (let i = 0; i < tableData[0].length; i++) {
        let max = 0;
        for (let j = 0; j < tableData.length; j++) {
            // 第j列的第i个值
            const resV = computeLenghtByStr(basePixelSize, baseFontSize, tableData[j][i]);
            if (max < resV) {
                max = resV;
            }
        }
        cloumnMaxWidthArr.push(max + initValue);
    }
    return cloumnMaxWidthArr;
}

function createTableBox(basePixelSize, baseFontSize, cloumnMaxWidthArr, tableData, lineNumShow) {
    const tableBoxEl = document.createElement('div');
    tableBoxEl.className = 'table-box';
    let sum = cloumnMaxWidthArr.reduce((acc, n) => acc + n);
    if (lineNumShow) {
        // 把行号宽度加上
        sum += computeLenghtByStr(basePixelSize, baseFontSize, "9999");
    }
    tableBoxEl.style.width = sum + 'px';
    // 行号是否显示
    if (lineNumShow) {
        const tableColumnBoxEl = document.createElement('div');
        tableColumnBoxEl.className = 'table-column-box';
        tableColumnBoxEl.style.width = computeLenghtByStr(basePixelSize, baseFontSize, "9999") + 'px';
        for (let i = 0; i < tableData.length; i++) {
            if (i === 0) {
                const tableTitleBoxEl = document.createElement('div');
                tableTitleBoxEl.className = 'table-column-title-box';
                tableTitleBoxEl.innerText = '#';
                tableColumnBoxEl.appendChild(tableTitleBoxEl);
            } else {
                const tableContentBoxEl = document.createElement('div');
                tableContentBoxEl.className = 'table-column-content-box';
                tableContentBoxEl.innerText = i;
                tableColumnBoxEl.appendChild(tableContentBoxEl);
            }
        }
        tableBoxEl.appendChild(tableColumnBoxEl);
    }

    for (let i = 0; i < tableData[0].length; i++) {
        const tableColumnBoxEl = document.createElement('div');
        tableColumnBoxEl.className = 'table-column-box';
        tableColumnBoxEl.style.width = cloumnMaxWidthArr[i] + 'px';
        for (let j = 0; j < tableData.length; j++) {
            // 第j列的第i个值
            if (j == 0) {
                const tableTitleBoxEl = document.createElement('div');
                tableTitleBoxEl.className = 'table-column-title-box';
                tableTitleBoxEl.innerText = tableData[j][i];
                tableColumnBoxEl.appendChild(tableTitleBoxEl);
            } else {
                const tableContentBoxEl = document.createElement('div');
                tableContentBoxEl.className = 'table-column-content-box';
                tableContentBoxEl.innerText = tableData[j][i];
                tableColumnBoxEl.appendChild(tableContentBoxEl);
            }
        }
        tableBoxEl.appendChild(tableColumnBoxEl);
    }
    return tableBoxEl;
}